<template>
  <div class="active phoneCSS">
    <ex-header title="我的奖励"></ex-header>
    <div class="active_hearder_background"></div>
    <div class="active_content">
      <div class="active_tips" v-if="actNoDetail.content">
        <flexbox style="text-align:center">
          <flexbox-item>
            <div class="active_tips_flex_left">
              <div class="active_tips_flex_left_title">活动时间</div>
              <div class="active_tips_flex_left_date">{{actNoDetail.content.date}}</div>
              <div class="active_tips_flex_left_time">{{actNoDetail.content.beginTime.split(' ')[1]}}-{{actNoDetail.content.endTime.split(' ')[1]}}</div>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="active_tips_flex_center">
              <div class="active_tips_flex_left_title">开奖时间</div>
              <div class="active_tips_flex_left_date">{{actNoDetail.content.lotteryTime.split(' ')[0]}}</div>
              <div class="active_tips_flex_left_time">{{actNoDetail.content.lotteryTime.split(' ')[1]}}</div>
            </div>
          </flexbox-item>
          <flexbox-item>
            <div class="active_tips_flex_right">
              <div class="active_tips_flex_left_title">奖励积分</div>
              <div class="active_tips_flex_left_integral">YXT</div>
              <div style="visibility:hidden;">WLT</div>
            </div>
          </flexbox-item>
        </flexbox>
      </div>
      <div class="active_container">
        <div class="active_container_lottery">
          <div class="active_container_lottery_img">
            <img :src="lottery">
          </div>
          <div class="active_container_lottery_res" >{{reward.result ? reward.result.replace(/\,/g,'、'):''}}</div>
        </div>
        <div class="active_container_top" v-if="reward.buys">
          <div class="active_container_lottery_img">
            <img :src="purchase">
          </div>
          <div class="active_container_lottery_res active_container_purchase">
            <div v-for="item in reward.buys">{{item.coin}} 买入{{item.money}}元</div>
          </div>
        </div>
        <div class="active_container_top">
          <div class="active_container_lottery_img">
            <img :src="myluck">
          </div>
          <div class="active_container_lottery_res">
            <div class="active_container_flex" v-if="reward.luckyZodiacs">
              <flexbox style="text-align:center" :gutter="0" justify="center" align="center">
                <flexbox-item v-for="item in reward.luckyZodiacs">
                  <div class="active_container_flex_luck">
                    <img :src="getAnimalImg(item.zodiac)">
                  </div>
                </flexbox-item>
              </flexbox>
              <flexbox style="text-align:center" :gutter="0" justify="center" align="center">
                <flexbox-item v-for="item in reward.luckyZodiacs">
                  <div>{{item.number}}个</div>
                </flexbox-item>
              </flexbox>
            </div>
          </div>

          <div class="active_container_top">
            <div class="active_container_lottery_img">
              <img :src="luck_reward">
            </div>
            <div class="active_container_lottery_res active_container_reward">
              <div v-for="item in reward.awards">{{item.coin}}奖励：{{item.amount}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, Swiper, SwiperItem } from "vux";
import myluck from "@/static/images/newYearActivities/myluck.png";
import purchase from "@/static/images/newYearActivities/purchase.png";
import lottery from "@/static/images/newYearActivities/lottery.png";
import luck_reward from "@/static/images/newYearActivities/luck_reward.png";
import unit_1 from "@/static/images/newYearActivities/rat.png";
import unit_2 from "@/static/images/newYearActivities/cattle.png";
import unit_3 from "@/static/images/newYearActivities/tiger.png";
import unit_4 from "@/static/images/newYearActivities/rabbit.png";
import unit_5 from "@/static/images/newYearActivities/loong.png";
import unit_6 from "@/static/images/newYearActivities/snake.png";
import unit_7 from "@/static/images/newYearActivities/horse.png";
import unit_8 from "@/static/images/newYearActivities/sheep.png";
import unit_9 from "@/static/images/newYearActivities/monkey.png";
import unit_10 from "@/static/images/newYearActivities/chicken.png";
import unit_11 from "@/static/images/newYearActivities/dog.png";
import unit_12 from "@/static/images/newYearActivities/pig.png";
import exHeader from "@/components/xheader/index";
import store from "@/store/index.js";
import { mapGetters } from "vuex";
export default {
  components: { Flexbox, FlexboxItem, Swiper, SwiperItem, exHeader },
  data() {
    return {
      animals:[     //十二生肖
        {key:'鼠',src:unit_1},
        {key:'牛',src:unit_2},
        {key:'虎',src:unit_3},
        {key:'兔',src:unit_4},
        {key:'龙',src:unit_5},
        {key:'蛇',src:unit_6},
        {key:'马',src:unit_7},
        {key:'羊',src:unit_8},
        {key:'猴',src:unit_9},
        {key:'鸡',src:unit_10},
        {key:'狗',src:unit_11},
        {key:'猪',src:unit_12},
      ],

      lottery: lottery,
      purchase: purchase,
      myluck: myluck,
      luck_reward: luck_reward,
      tabs_index: 0,
      sceneId: null
    };
  },
  created() {
    this.sceneId = parseInt(this.$route.query.sceneId);
    this.getActNoDetail(this.sceneId)
  },
  mounted() {},
  computed: {
    ...mapGetters([
      "token",
      "actNoDetail", //场次详情
      "reward" //我的奖励
    ])
  },
  methods: {
    getActNoDetail(sceneId) {
      //场次详情
      store.dispatch("actNoDetailFunc", sceneId).then(res => {
          this.getReward()
      });
    },
    getReward() {
      let uid = this.token.user.uid;
      let params = {
        uid: uid,
        sceneId: this.sceneId
      };
      store.dispatch("rewardFunc",params).then(reward => {});
    },
    getAnimalImg(value){
        ///返回生肖图片
        if(value){
            let animalImg = ''
            this.animals.forEach(item => {
                if(item.key == value){
                    animalImg = item.src
                }
            })
            return animalImg
        }
    },
    tab_hanlder(index) {
      this.tabs_index = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.active {
  height: 100%;
  background-image: url(../../../static/images/newYearActivities/knhdBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .active_hearder_background {
    height: 3.8933rem;
    background-image: url(../../../static/images/newYearActivities/knhd_top_pic.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .active_content {
    width: 9.2rem;
    margin: auto;
    position: relative;
    top: -1.4rem;
    height: calc(100% - 2.5rem - 1.0933rem);
  }
  .active_tips {
    height: 2.4rem;
    width: 100%;
    background-image: url(../../../static/images/newYearActivities/knhd_time_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin: auto;
  }
  .active_tips_flex_left {
    font-size: 0.2667rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0;
  }
  .active_tips_flex_center {
    font-size: 0.2667rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0;
  }
  .active_tips_flex_right {
    font-size: 0.2667rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 1);
    padding: 0.4rem 0;
  }
  .active_tips_flex_left_title {
    font-size: 0.2667rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 1);
  }
  .active_tips_flex_left_date,
  .active_tips_flex_left_integral {
    margin: 0.2667rem 0 0;
  }
  .active_container {
    margin-top: 0.2667rem;
    height: calc(100% - 3rem);
    width: 9.2rem;
    background-color: rgba(132, 13, 13, 0.5);
    border-radius: 0.1333rem;
  }
  .active_container_lottery_img {
    img {
      width: 3.5867rem;
      height: 0.72rem;
    }
  }
  .active_container_lottery_res {
    font-size: 0.2667rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
  .active_container_lottery {
    text-align: center;
    padding-top: 0.2667rem;
  }
  .active_container_top {
    text-align: center;
    padding-top: 0.4rem;
  }
  .active_container_flex_luck {
    img {
      width: 1.0533rem;
      height: 1.0533rem;
    }
  }
  .active_container_flex {
    width: 7rem;
    margin: auto;
  }
  .active_container_reward {
    line-height: 0.8rem;
  }
  .active_container_purchase {
    line-height: 0.6rem;
  }
}
</style>
